import React from 'react';
import { Select as AntdSelect } from 'antd';
import type { SelectProps as AntdSelectProps } from 'antd';
import { createStyles } from 'antd-style';

export interface SelectProps<T = any> extends AntdSelectProps<T> {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
}

const useStyles = createStyles(({ token, css }) => ({
  select: css`
    width: 100%;
    border-radius: ${token.borderRadius}px;
  `,
}));

const SelectComponent = <T extends any = any>({ customClassName, className, ...restProps }: SelectProps<T>) => {
  const { styles, cx } = useStyles();
  
  const selectClassName = cx(
    className,
    customClassName,
    styles.select
  );

  return <AntdSelect className={selectClassName} {...restProps as any} />;
};

const Select = Object.assign(SelectComponent, {
  _InternalPanelDoNotUseOrYouWillBeFired: (AntdSelect as any)._InternalPanelDoNotUseOrYouWillBeFired,
});

export { Select };
export default Select;

